import axios from "axios";
import React from "react";
/**
 * 影院组件
 */
class Cinema extends React.Component{
    constructor(){
        super()
        
    }
    state={
        cinemaList:[],
        bfList:[]
    }
    //创建时
    componentDidMount(){
        this.handlerCinema();
    }
    //电影院信息
    handlerCinema(){
        //请求数据
        axios({
            method:'GET',
            url:"https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=2005318",
            headers:{
                "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.0","e":"1654433035923688551579649"}',
                "X-Host": "mall.film-ticket.cinema.list"
            }    
        }).then(res=>{
        // console.log(res.data.data.cinemas)
        this.setState({
            cinemaList:res.data.data.cinemas,
            newval:""
        })
        })
    }
    //搜索框被改变
    handlerInput=(e)=>{
        //过滤出符合条件的
        let newarr=this.state.cinemaList.filter(item=>{
            //统一转大写
            return item.name.toUpperCase().includes(this.state.newval.toUpperCase())||item.address.toUpperCase().includes(this.state.newval.toUpperCase())
        })
        return newarr;
    }
    render(){
        
        return(
            <div>
                <input value={this.state.newval} onChange={(e)=>{
                    this.setState({
                        newval:e.target.value
                    })
                }}></input>
                {
                    this.handlerInput().map(item=>
                    <dl key={item.cinemaId}>
                        <div>{item.name}</div>
                        <div>{item.address}</div>
                    </dl>
                    )
                }
            </div>
        )
    }
}

export default Cinema